$gap: 10px;
$radius: 5px;

.layout {
  // background: #ffa500;
  background-color: var(--el-color-primary);
  width: 100%;
  height: 100%;
  padding: $gap;
  overflow: hidden;
  position: relative;
  .close-btn {
    -webkit-app-region: no-drag;
    cursor: pointer;
    position: absolute;
    right: $gap;
    top: $gap;
    z-index: 10;
    width: 28px;
    height: 28px;
    background: url("@/assets/images/close.png") no-repeat center center;
    background-size: cover;
    transition: 0.5s transform;
    &:hover {
      transform: scale(1.05);
    }
  }
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 2;
  }
  .title {
    height: 32px;
    line-height: 42px;
    font-size: 18px;
  }
  .main {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: nowrap;
    .content {
      flex: 1;
      .countdown {
        font-weight: 600;
        font-size: 42px;
        margin: $gap 0;
      }
      .time-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        .item {
          min-width: 36px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-direction: column;
          padding: $gap 20px;
          background: rgba(0, 0, 0, 0.08);
          border-radius: $radius;
          font-size: 14px;
          .title {
            height: 24px;
            line-height: 24px;
          }
          .value {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            font-weight: 600;
          }
          .unit {
          }
        }
      }
    }
    .picture {
      margin-left: $gap;
      width: 182px;
      height: 182px;
      // background-image: url("@/assets/images/frame/cat.png");
      background-repeat: no-repeat;
      background-size: cover;
      // background-size: 300%; /* 3 列横向 × 3 行纵向 */
      // animation: play-cat 1s steps(9) infinite;
      // animation-play-state:  paused;
    }
    @keyframes play-cat {
      0% {
        background-position: 0% 0%;
      }
      11.1% {
        background-position: -100% 0%;
      }
      22.2% {
        background-position: -200% 0%;
      }
      33.3% {
        background-position: 0% -100%;
      }
      44.4% {
        background-position: -100% -100%;
      }
      55.5% {
        background-position: -200% -100%;
      }
      66.6% {
        background-position: 0% -200%;
      }
      77.7% {
        background-position: -100% -200%;
      }
      88.8% {
        background-position: -200% -200%;
      }
      100% {
        background-position: 0% 0%;
      }
    }
  }
}